<script>
import {defineComponent} from 'vue'
import {mapState,mapMutations,mapGetters} from "vuex";
export default defineComponent({
    name: "App",
    methods:{
        ...mapMutations(["CHANGE_NUM"]),
        ...mapMutations({
            changeNum:"CHANGE_NUM"
        })
    },
    computed:{
        ...mapState(["num"]),
        ...mapState({
            suibian(state){
               return state.num;
            }
        }),
        ...mapGetters(["sum"]),
        ...mapGetters({
            s:"sum"
        })
    }
})
</script>

<template>
    <div>
        <h3>App</h3>
        <button @click="$store.commit('CHANGE_NUM',1)">{{ $store.state.num }}</button>
        <button @click="CHANGE_NUM(2)">{{ num }}</button>
        <button @click="changeNum(3)">{{ suibian }}</button>
        <hr/>
        <h3>合计：{{$store.getters.sum}}</h3>
        <h3>合计：{{sum}}</h3>
        <h3>合计：{{s}}</h3>
    </div>
</template>

<style scoped>

</style>